<template>
  <div>
    <el-card>
      <div>
        <el-row>
          <el-col>
            <Button type="success" size="small" @click="formatSql">格式化SQL</Button>
            <!-- <Button size="small" type="primary" @click="test()">审核SQL</Button> -->
          </el-col>
        </el-row>
      </div>
      <br />
      <div style="margin: -10px">
        <codemirror ref="originalSql" v-model="sqls" :options="cmOptions" class="CodeMirror" @changes="onCmCodeChanges"></codemirror>
      </div>
      <br />
    </el-card>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/duotone-light.css'
import 'codemirror/theme/paraiso-light.css'
import 'codemirror/theme/lucario.css'
import 'codemirror/theme/mdn-like.css'
import 'codemirror/theme/monokai.css'
import 'codemirror/mode/sql/sql.js'
import { format } from 'sql-formatter'
import 'codemirror/addon/edit/matchbrackets.js'
// 引入代码自动提示插件
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/lint.css'
export default {
  name: 'CodeSql',
  components: { codemirror },
  props: {
    sqls: {
      type: String,
      require: true,
      default: ''
    }
  },
  data() {
    return {
      codeChange: true,
      cmOptions: {
        // codemirror options
        tabSize: 2,
        indentUnit: 4,
        mode: 'text/x-mysql',
        matchBrackets: true,
        theme: 'default',
        lineNumbers: true,
        line: true,
        styleActiveLine: true,
        readOnly: true,
        lineWrapping: true,
        lint: true, // 检查格式
        spellcheck: true, // 拼写检查
        hintOptions: {
          completeSingle: false
        }
      }
    }
  },
  mounted() {
    this.$refs.originalSql.codemirror.on('inputRead', (originalSql) => {
      originalSql.showHint()
    })
  },
  methods: {
    formatSql() {
      /* （sql编辑器内容绑定content参数） 将sql内容进行格式后放入编辑器中*/
      this.sqls = format(this.sqls)
    },
    test() {},
    onCmCodeChanges() {
      this.codeChange = true
    }
  }
}
</script>

<style lang='scs' scoped>
</style>
